<template>
	<view>
		<!-- 自定义导航栏 -->
		<uniBavBar dark :fixed="true"  background-color="#FFFFFF" :border="false"  color="#000000" status-bar left-icon="left"
			   class="navbar u-f-ac u-f-juc">
			<template #left>
				<text class="icon iconfont icon-qiandao" style="font-size: 60upx;color: #ffa502;" @tap="qiandao"></text>
			</template>
			<!-- 默认插槽 -->
			<template #default>
				<view class="navbar__content u-f-juc u-f-ac" >
					
					<view v-for="item in tabbar" @tap="changeNav(item.id)" class="u-f-ac u-f-juc" :class="[{'active':isguanzhu==item.id},item.id]">{{item.text}}</view>
					
					<text class="line"></text>
				</view>
			</template>
			<template #right>
				<text class="icon iconfont icon-bianji" style="font-size: 60upx;" @tap="openAdd"></text>
			</template>
	
		</uniBavBar>
	</view>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import uniBavBar from '../../uni-nav-bar/uni-nav-bar.vue';
	import user from '../../../common/user.js'
	
	const props = defineProps({
		tabbar:{
			type:Array,
			required:true,
		},
		isguanzhu:{
			type:String,
			required:true
		}
	})
	
	const emits = defineEmits(["update:isguanzhu","changeTab"])
	
	const topNav = reactive({
		width:0,
		left:0,
	})
	
	
	
	onMounted(()=>{
		changeNav('guanzhu')
		topNav.bottom=parseFloat(topNav.bottom)+4+"px";
	})
	
	// 顶部导航栏滑块改变事件
	function changeNav(className){
		if(topNav.width!=0&&props.isguanzhu==className)return;
		emits("update:isguanzhu",className)
		
		switchLine(className)
		emits("changeTab",className)
		
	}
	
	// 改变swiper滑块
	function changeSwiper(e){
		emits("update:isguanzhu",e.detail.currentItemId)
		switchLine(e.detail.currentItemId)
	}
	
	// 滑块改变
	function switchLine(className){
		const dom = uni.createSelectorQuery()
		dom.select("."+className).fields({
			size:true,
			rect:true
		}).exec((res)=>{
			res[0]['left']-=uni.upx2px(174);
			res[0]['width']+=8;
			res[0]['width']+="px";
			res[0]['left']+="px";
			
			Object.assign(topNav,res[0])
		})
	}
	
	// 添加
	function openAdd(){
		user.navigate({
			url:"../add-input/add-input"
		})
	}
	// 签到
	function qiandao(){
		
	}
	defineExpose({switchLine})
</script>

<style lang="scss" scoped>
	.navbar {
		border: 0upx solid transparent;
		margin: 0 20upx;
	}
.navbar__content {
		position: relative;
		width: 100%;
		display: flex;
		font-size: 34upx;
		color: #aaa;
		font-weight: bold;
		&>view{
			margin: 0 20upx;
		}
		&>.line {
			position: absolute;
			bottom:10upx;
			left: v-bind('topNav.left');
			width: v-bind('topNav.width');
			height:10upx;
			border-radius: 10upx;
			background-color: #eccc68;
			transition: all .4s linear;
		}
		& .active {
			color: #000;
		}
	}
	
</style>
